<template>
	<view>
		<view class="fund-header">
			<view class="layout">				
				<view class="fund-header-backend" @click="handleBackendButton()">
					<image src="/static/icon/icon-back.png"></image>
				</view>
				<view class="fund-header-tooltip">
					城市合伙人
				</view>
				<view class="fund-header-more">
					<image src="/static/icon/icon-moer.png"></image>
				</view>
			</view>
		</view>
		<view class="dashboard">
			<view class="dashboard-header">
				<view class="dashboard-header-tooltip">总收益（元）</view>
				<view class="dashboard-header-volume">88888.12</view>
			</view>
			<view class="dashboard-box">
				<view class="layout">
					
					<view class="dashboard-box-item">
						<view>待入账（元）</view>
						<view>{{distributionData.commissionAmount}}</view>
					</view>
					<view class="dashboard-box-item">
						<view>提现中（元）</view>
						<view>{{distributionData.eximinamAmount}}</view>
					</view>
					<view class="dashboard-box-item">
						<view>已提现（元）</view>
						<view>{{distributionData.withdrawAmount}}</view>
					</view>
				</view>
			</view>
			<view class="dashboard-button">立即提现</view>
		</view>
		<view class="analysis">
			<view class="analysis-tooltip">我的分销业绩</view>
			<view class="analysis-box">
				<view class="layout flex-wrap">					
					<view class="analysis-box-item">
						<view class="layout">				
							<view class="analysis-box-item-icon">
								<image src="/static/icon/distribution/icon-user-min.png"></image>
							</view>
							<view class="analysis-box-item-text">
								<view>10<text>名</text></view>
								<view>我的用户</view>
							</view>
						</view>
					</view>		
					<view class="analysis-box-item">
						<view class="layout">				
							<view class="analysis-box-item-icon">
								<image src="/static/icon/distribution/icon-money.png"></image>
							</view>
							<view class="analysis-box-item-text">
								<view>725.25<text>元</text></view>
								<view>用户提成</view>
							</view>
						</view>
					</view>		
					<view class="analysis-box-item">
						<view class="layout">				
							<view class="analysis-box-item-icon">
								<image src="/static/icon/distribution/icon-store-min.png"></image>
							</view>
							<view class="analysis-box-item-text">
								<view>725.25<text>元</text></view>
								<view>我的分销商</view>
							</view>
						</view>
					</view>		
					<view class="analysis-box-item">
						<view class="layout">							
							<view class="analysis-box-item-icon">
								<image src="/static/icon/distribution/icon-money-min.png"></image>
							</view>
							<view class="analysis-box-item-text">
								<view>725.25<text>元</text></view>
								<view>分销商提成</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="app">
			<view class="app-tooltip">常用功能</view>
			<view class="app-box">
				<view class="layout flex-wrap">	
					<view class="app-box-item" @click="handleButtonJump('/customer/customer')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-user.png"></image>
						</view>
						<view class="app-box-item-text">我的用户</view>
					</view>
					<view class="app-box-item" @click="handleButtonJump('/agent/agent')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-store.png"></image>
						</view>
						<view class="app-box-item-text">我的分销商</view>
					</view>
					<view class="app-box-item" @click="handleButtonJump('/commission/commission')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-commission.png"></image>
						</view>
						<view class="app-box-item-text">收益明细</view>
					</view>
					<view class="app-box-item" @click="handleButtonJump('/order/order')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-withdraw.png"></image>
						</view>
						<view class="app-box-item-text">提现记录</view>
					</view>
					<view class="app-box-item" @click="handleButtonJump('/order/order')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-backcard.png"></image>
						</view>
						<view class="app-box-item-text">银行卡</view>
					</view>
					<view class="app-box-item" @click="handleButtonJump('/order/order')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-order.png"></image>
						</view>
						<view class="app-box-item-text">分销订单</view>
					</view>
					<view class="app-box-item">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-user-add.png"></image>
						</view>
						<view class="app-box-item-text">注册报名</view>
					</view>
					<view class="app-box-item" @click="handleButtonJump('/agent/qrcode/qrcode')">
						<view class="app-box-item-icon">
							<image src="/static/icon/distribution/icon-qrcode.png"></image>
						</view>
						<view class="app-box-item-text">专属二维码</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				distributionData:{
					withdrawAmount:0,
					commissionAmount:0,
					eximinamAmount:0
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			handleBackendButton:function(){
				uni.switchTab({
					url:"/pages/home/home/home",
					fail(res) {
						console.log(res)
					}
				})
			},
			refreshScore:function(){
				let _this = this;
				_this.$distribution.getAgentScore().then(res=>{
					if(res.code == 200){
						_this.agentScore = res.data;
					}
				})
			},
			handleButtonJump:function(url){
				uni.navigateTo({
					url:"/pages/distribution"+url,
					fail(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
page { padding-top: 100rpx; padding-bottom: 120rpx; background: #ededed; font-size: 14px; }
.fund-header { position: fixed; top:var(--status-bar-height); left: 0; right: 0; z-index: 100; }
.fund-header { background: #fff; padding: 15rpx; }

.fund-header-backend { width: 50rpx; height: 40rpx; }
.fund-header-tooltip { width: 600rpx; text-align: center; }
.fund-header-more { width: 50rpx; height: 40rpx; }

.dashboard { height: 600rpx; background: #fff; margin-bottom: 30rpx; }
.dashboard-header { width: 200rpx; margin: 0 auto; padding: 100rpx 0; text-align: center;}
.dashboard-header-tooltip { font-size: 14px; }
.dashboard-header-volume { font-size: 24px; font-weight: bold; padding: 30rpx 0;}
.dashboard-box { padding: 0 100rpx; }
.dashboard-box-item { width: 200rpx; text-align: center; height: 100rpx; }
.dashboard-button { width: 300rpx; background: #ededed; margin: 0 auto; text-align: center; }
.dashboard-button { padding: 25rpx 0; font-size: 16px; font-weight: bold; }
.dashboard-button { border-radius: 50rpx; margin-top: 30rpx; }
.analysis { background: #fff; border-radius: 20rpx; padding:15rpx; margin-bottom: 30rpx; }
.analysis-tooltip { padding: 25rpx 0; font-size: 20px; font-weight: 800; }
.analysis-box { padding: 0 50rpx;}
.analysis-box-item { width: 300rpx; margin-bottom: 30rpx; }
.analysis-box-item-icon { width: 50rpx; height: 50rpx; padding-top: 15rpx; padding-right: 10rpx; }

.app { background: #fff; border-radius: 20rpx; padding:15rpx; margin-bottom: 30rpx; }
.app-tooltip { padding: 20rpx 0; }
.app-tooltip { padding: 25rpx 0; font-size: 20px; font-weight: 800; }

.app-box-item { width: 170rpx; margin-bottom: 30rpx; }
.app-box-item-icon { width: 130rpx; height: 130rpx; margin: 0 auto; margin-bottom: 25rpx; }
.app-box-item-icon image { border-radius: 150rpx; }
.app-box-item-text { text-align: center; }
</style>
